<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息中心</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = { theme: { extend: { colors: { primary: '#10b981', 'text-primary': '#1f2937', 'text-secondary': '#6b7280' }}}}
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <header class="glass-effect sticky top-0 z-10 border-b border-gray-100">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.history.back()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h1 class="text-base font-bold flex-1">消息中心</h1>
                <button class="text-xs text-primary">全部已读</button>
            </div>
        </header>
        
        <main class="px-4 py-3 pb-20">
            <div class="space-y-3">
                <div class="card-modern p-4">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                            <i class="fa fa-comment text-primary"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <h3 class="text-sm font-bold">服务咨询</h3>
                                <span class="text-xs text-text-secondary">10分钟�?/span>
                            </div>
                            <p class="text-xs text-text-secondary">您好，我对您发布的服务感兴趣...</p>
                        </div>
                        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                    </div>
                </div>
            </div>
        </main>
        
        <div id="bottom-nav"></div>
        <div id="publish-modal-container"></div>
    </div>
    
    <script src="../js/common.js"></script>
    <script src="../js/navigation.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            Components.initComponents('');
        });
    </script>
</body>
</html>

